<!-- pages/partner/request-sent.vue -->
<!-- pages/partner/request-sent.vue -->
<template>
  <view class="container">
    <!-- 成功提示区域 -->
    <view class="success-section">
      <view class="success-icon">✨</view>
      <text class="success-title">请求已发送 🎉</text>
      <text class="success-desc">请耐心等待对方回复 ⏳</text>
      
      <!-- 当前申请的搭子信息 -->
      <view class="partner-card card-shadow">
        <image :src="currentPartner.avatar" class="partner-avatar" mode="aspectFill"></image>
        <view class="partner-info">
          <text class="partner-name">{{currentPartner.name}} 👋</text>
          <text class="partner-major">{{currentPartner.major}} 📚</text>
          <text class="partner-target">目标院校：{{currentPartner.targetSchool}} 🎯</text>
        </view>
      </view>
    </view>

    <!-- 更多推荐 -->
    <view class="recommend-section">
      <view class="section-header">
        <text class="section-title">更多搭子推荐 🤝</text>
      </view>
      
      <view class="recommend-list">
        <view class="recommend-item card-shadow" 
              v-for="(partner, index) in recommendPartners" 
              :key="index">
          <image :src="partner.avatar" class="recommend-avatar" mode="aspectFill"></image>
          <view class="recommend-info">
            <view class="info-header">
              <text class="recommend-name">{{partner.name}} ✨</text>
              <text class="recommend-major">{{partner.major}} 📚</text>
            </view>
            <text class="recommend-target">目标院校：{{partner.targetSchool}} 🎓</text>
            <text class="recommend-desc">{{partner.description}} 💪</text>
          </view>
          <button class="connect-btn" 
                  hover-class="btn-hover"
                  @click="sendRequest(partner.id)">
            加为搭子 🤗
          </button>
        </view>
      </view>
    </view>

    <!-- 返回按钮 -->
    <button class="back-btn" @click="goBack">返回首页 🏠</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 当前申请的搭子信息
const currentPartner = ref({
  avatar: '/static/my/男孩.png',
  name: '赵六',
  major: '金融学',
  targetSchool: '清华大学'
})

// 推荐的搭子列表
const recommendPartners = ref([
  {
    id: 1,
    avatar: '/static/my/头像 女孩.png',
    name: '月月',
    major: '计算机科学',
    targetSchool: '北京大学',
    description: '专注计算机考研，目前在刷王道考研。希望找到一起进步的伙伴。'
  },
  {
    id: 2,
    avatar: '/static/my/头像 女孩.png',
    name: '美美',
    major: '金融学',
    targetSchool: '复旦大学',
    description: '每天学习12小时，正在找一起早起打卡的搭子。'
  }
])

// 发送搭子请求
const sendRequest = (partnerId) => {
  uni.showToast({
    title: '请求已发送',
    icon: 'success'
  })
}

// 返回首页
const goBack = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 30rpx;
}

.success-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #A8BF8F 0%, #8FA876 100%);
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 60rpx;
  margin-bottom: 20rpx;
}

.success-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
}

.success-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.partner-card {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.partner-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  margin-right: 20rpx;
  border: 3rpx solid #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.partner-info {
  flex: 1;
}

.partner-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 6rpx;
}

.partner-major {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 6rpx;
}

.partner-target {
  font-size: 26rpx;
  color: #888;
}

.recommend-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-header {
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.recommend-item {
  display: flex;
  padding: 20rpx;
  position: relative;
  background: #fff;
}

.recommend-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  margin-right: 20rpx;
  border: 3rpx solid #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.recommend-info {
  flex: 1;
  margin-right: 120rpx;
}

.info-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 6rpx;
}

.recommend-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

.recommend-major {
  font-size: 24rpx;
  color: #666;
  background: #f0f2f5;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.recommend-target {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 6rpx;
}

.recommend-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
}

.connect-btn {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #A8BF8F 0%, #8FA876 100%);
  color: #fff;
  font-size: 26rpx;
  padding: 12rpx 24rpx;
  border-radius: 30rpx;
  border: none;
}

.btn-hover {
  opacity: 0.8;
  transform: translateY(-50%) scale(0.95);
}

.back-btn {
  width: 100%;
  background: #fff;
  color: #666;
  font-size: 30rpx;
  padding: 20rpx;
  border-radius: 12rpx;
  border: 2rpx solid #eee;
}

.card-shadow {
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border-radius: 12rpx;
}
</style>